<template>
  <div class="err-403-main">
    <header class="err-403-header">
      <component :is="logoImg" class="err-403-logo" />
      <div class="err-403-right-box">
        <a-icon
          class="err-403-icon1"
          :component="require('@/assets/icon/System_Status.svg')"
        />
        <a-icon
          class="err-403-icon2"
          :component="require('@/assets/icon/Message_Center.svg')"
          style="font-size:16px"
        />
        <a-icon
          class="err-403-icon3"
          :component="require('@/assets/icon/User_Avatars.svg')"
        />
      </div>
    </header>
    <div class="err-403-bg" />

    <div class="err-403-ctx">
      <div class="err-403-inner-ctx">
        <div class="err-403-inner-text">
          <a-icon
            class="err-403-icon-lt"
            :component="require('@/assets/icon/err-403.svg')"
          />
          <p class="ep-1">抱歉，您无权访问改页面，请按以下步骤开通！</p>
          <p class="ep-2">AHM系统权限开通方法</p>
          <p class="ep-3">
            1.进入海技工程网，菜单路径：维修工程->信息系统变更申请，如下截图
          </p>
          <img
            class="jt-img"
            src="@/assets/img/v2.jpg"
            alt=""
            @click="checkImgHandler(1)"
          >
          <p class="ep-3">
            2.直接访问地址：
            <a
              href="http://gcat.hnair.net/HNAME/DataManage/Index.aspx?flag=5"
              target="_blank"
            >
              http://gcat.hnair.net/HNAME/DataManage/Index.aspx?flag=5
            </a>
          </p>
          <p class="ep-3">
            3.进入“信息系统变更申请”界面，选择“信息系统权限申请”下“我的申请”，界面有具体操作说明，需要补充说明：我的申请界面中，涉及系统：AHM系统，系统模块：系统权限申请。
          </p>
          <img
            class="jt-img"
            src="@/assets/img/v1.jpg"
            alt=""
            @click="checkImgHandler(2)"
          >
        </div>
      </div>
    </div>
    <a-modal
      title="截图"
      :visible="visible"
      :width="900"
      :footer="null"
      @cancel="handleCancel"
    >
      <img v-if="visibleIndex === 1" src="@/assets/img/v2.jpg" alt="">
      <img v-else src="@/assets/img/v1.jpg" alt="">
    </a-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import logoImg from '@/assets/img/Logo.svg';
export default {
  name: 'Exp403',

  data() {
    return {
      logoImg,
      visible: false,
      visibleIndex: 1
    };
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
    minHeight() {
      return this.pageMinHeight ? this.pageMinHeight + 'px' : '100vh';
    }
  },
  methods: {
    checkImgHandler(index) {
      this.visible = true;
      this.visibleIndex = index;
    },
    handleCancel() {
      this.visible = false;
    }
  }
};
</script>

<style lang="less">
.err-403-main {
  height: 100%;
  font-family: @font-family;
  .jt-img {
    width: 320px;
    display: block;
    margin-bottom: 8px;
  }
  .ep-1 {
    font-size: 18px;
    color: #21252e;
    font-weight: 600;
    margin-bottom: 40px;
  }
  .ep-2 {
    font-size: 14px;
    color: #505363;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .ep-3 {
    font-size: 14px;
    color: #505363;
    font-weight: 400;
    margin-bottom: 8px;
  }
  .err-403-icon-lt {
    position: absolute;
    left: -110px;
    top: -21px;
    svg {
      width: 100px;
      height: 100px;
    }
  }
  .err-403-header {
    width: 100%;
    position: fixed;
    z-index: 130;
    top: 0;
    right: 0;
    overflow: hidden;
    transition: all 0.2s;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 4px;
    padding-left: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .err-403-logo {
      width: 341px;
      height: 22px;
      vertical-align: middle;
      margin-bottom: 4px;
    }
    .err-403-icon1,
    .err-403-icon2 {
      height: 100%;
      width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        width: 20px;
        height: 20px;
      }
    }

    .err-403-icon3 {
      height: 100%;
      width: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        width: 26px;
        height: 26px;
      }
    }
    .err-403-right-box {
      display: flex;
      align-items: center;
    }
  }
  .err-403-ctx {
    background-color: #e5e8ed;
    height: 100%;
    .err-403-inner-ctx {
      background: #fff;
      position: absolute;
      top: 108px;
      box-sizing: border-box;
      left: 24px;
      right: 24px;
      bottom: 24px;
    }
    .err-403-inner-text {
      width: 650px;
      position: absolute;
      left: 0;
      right: 0;
      top: 83px;
      bottom: 0;
      margin: 0 auto;
      height: 600px;
    }
  }
  .err-403-bg {
    height: 156px;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg width='1920px' height='160px' viewBox='0 0 1920 160' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3EHeader%3C/title%3E %3Cdefs%3E %3ClinearGradient x1='116.446533%25' y1='48.5765584%25' x2='34.2163086%25' y2='49.9503072%25' id='linearGradient-1'%3E %3Cstop stop-color='%23586AC9' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%2330329C' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3ClinearGradient x1='50%25' y1='-2.48949813e-15%25' x2='50%25' y2='100%25' id='linearGradient-2'%3E %3Cstop stop-color='%23FFFFFF' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%23FFFFFF' stop-opacity='0' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3ClinearGradient x1='50%25' y1='-2.48949813e-15%25' x2='50%25' y2='100%25' id='linearGradient-3'%3E %3Cstop stop-color='%23FFFFFF' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%23FFFFFF' stop-opacity='0' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3Cfilter x='-1.3%25' y='-12.2%25' width='102.5%25' height='124.1%25' filterUnits='objectBoundingBox' id='filter-4'%3E %3CfeGaussianBlur stdDeviation='1.26' in='SourceGraphic'%3E%3C/feGaussianBlur%3E %3C/filter%3E %3ClinearGradient x1='50%25' y1='100%25' x2='50%25' y2='26.2620192%25' id='linearGradient-5'%3E %3Cstop stop-color='%23DDAE96' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%23E3AD90' offset='30.5752841%25'%3E%3C/stop%3E %3Cstop stop-color='%23FFD2BB' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3C/defs%3E %3Cg id='Header' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='%E8%A3%85%E9%A5%B0' transform='translate(-46.000000%2C -353.000000)'%3E %3Crect id='%E7%9F%A9%E5%BD%A2' fill='url(%23linearGradient-1)' x='46' y='352.915434' width='1920' height='160'%3E%3C/rect%3E %3Cpath d='M557.047861%2C366.309672 C557.047861%2C366.309672 2472.97585%2C616.568906 1982.8167%2C232.729035 C1492.65755%2C-151.110835 557.047861%2C366.309672 557.047861%2C366.309672 Z' id='Path-2' fill-opacity='0.08' fill='url(%23linearGradient-2)' transform='translate(1310.047861%2C 268.736319) scale(1%2C -1) rotate(-7.000000) translate(-1310.047861%2C -268.736319) '%3E%3C/path%3E %3Cpath d='M-2.27373675e-13%2C504.958173 C-2.27373675e-13%2C504.958173 2045.69204%2C805.87932 1522.33486%2C344.335774 C998.977672%2C-117.207772 -2.27373675e-13%2C504.958173 -2.27373675e-13%2C504.958173 Z' id='Path-2' fill-opacity='0.04' fill='url(%23linearGradient-3)' transform='translate(804.000000%2C 387.632291) scale(-1%2C -1) translate(-804.000000%2C -387.632291) '%3E%3C/path%3E %3C/g%3E %3Cg id='egypt_India-2' transform='translate(1340.823515%2C 0.729172)'%3E %3Cg id='egypt_India' transform='translate(182.732795%2C 85.274411) rotate(15.000000) translate(-182.732795%2C -85.274411) translate(4.405827%2C 44.774411)'%3E %3Cpath d='M8.65393479%2C70.7894483 C8.65393479%2C70.7894483 165.591998%2C-3.67287232 339.653935%2C79' id='Path-106' stroke='%23000000' stroke-width='1.9152' opacity='0.400000006' filter='url(%23filter-4)'%3E%3C/path%3E %3Cpath d='M52.1879343%2C42.6243674 C89.2590119%2C27.576771 130.117503%2C18.9836836 173.403788%2C20.1598192 C228.878113%2C21.6671171 284.04846%2C39.2470565 337.572484%2C76.1017603 L339.193918%2C77.2244727 L338.113951%2C78.7755273 C284.389161%2C41.3680654 229.022791%2C23.5617457 173.352453%2C22.0491219 C130.34724%2C20.8806233 89.7422054%2C29.4204054 52.8987788%2C44.3755955 C40.8115952%2C49.2819287 30.0196649%2C54.5379992 20.6683168%2C59.792567 L19.2921303%2C60.5719285 L17.9670141%2C61.3343513 C17.7504349%2C61.4599676 17.5359968%2C61.584846 17.3237065%2C61.7089706 L16.0757911%2C62.4445447 L14.8797397%2C63.1612589 L13.7358701%2C63.8583449 L12.6444997%2C64.5350342 L11.7627951%2C65.0908077 L11.0935688%2C65.5188479 L10.1962874%2C66.1029793 L9.19354085%2C66.775753 L8.11432872%2C65.2241728 L8.88032476%2C64.7073266 L9.7503352%2C64.1366317 L10.7486651%2C63.4959282 L11.1097731%2C63.2672515 C11.4597885%2C63.0463174 11.8186502%2C62.8218002 12.1863057%2C62.593828 L13.3156008%2C61.8996745 L14.4973428%2C61.1855599 C14.6986528%2C61.0649201 14.902135%2C60.9434806 15.1077827%2C60.8212575 L16.3676033%2C60.0786431 L17.6790819%2C59.3179901 L19.0419028%2C58.5400675 C19.2733007%2C58.4090173 19.5068246%2C58.2772796 19.7424681%2C58.1448704 C29.1609642%2C52.8525718 40.0241937%2C47.561776 52.1879343%2C42.6243674 Z' id='Path-106' fill='%23FFFFFF' fill-rule='nonzero' opacity='0.313067769'%3E%3C/path%3E %3Ccircle id='Oval-1' fill='url(%23linearGradient-5)' cx='8' cy='68.0328722' r='8'%3E%3C/circle%3E %3Cpath d='M158.906604%2C41.8416523 L163.479259%2C42 L175.531294%2C24.7783316 L188.106096%2C25.2137879 C190.003748%2C25.2795022 191.587546%2C23.8570799 191.651912%2C22.0292603 C191.716278%2C20.2014408 190.236397%2C18.6729255 188.338745%2C18.6072112 L175.763943%2C18.1717549 L164.952701%2C0.158347742 L160.380045%2C0 L165.475468%2C17.8154725 L152.900666%2C17.3800162 L149.626273%2C12.8568709 L146.196782%2C12.7381101 L148.211686%2C20.5249568 L145.653935%2C28.1534557 L149.083426%2C28.2722165 L152.668017%2C23.9865929 L165.242819%2C24.4220491 L158.906604%2C41.8416523 L158.906604%2C41.8416523 Z' id='palne' fill='%23FFFFFF'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }
}
</style>
